<template>
  <div class="kj">
    <div class="header">
      <div class="header_zhong">
        <div class="text">
          <a href="./"> <img src="../../assets/images/logo.png"/></a>
        </div>
        <!--<div class="in">
          <div>{{examName}} </div>
        </div>-->
        <!--个人中心-->
        <div class="name">
          <Dropdown
            style="margin-left: 20px"
            placement="bottom-end"
            @on-click="userInfo"
          >
            <a style="color: #333333;font-size: 18px" href="javascript:void(0)">
              <img src="../../assets/images/people.png" style="width: 22px;height: 23px"/>&nbsp;&nbsp;{{name}}
              <Icon color="#3B50A1" type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
              <!-- <DropdownItem trigger="click"  v-on:click="people()"><span > 个人中心</span></DropdownItem>
              <DropdownItem trigger="click"  v-on:click="esc()"><span > 退出</span></DropdownItem> -->
              <Dropdown-Item name="personal">个人中心</Dropdown-Item>
              <Dropdown-Item name="logout">退出</Dropdown-Item>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name:'',
        examName:'',
      }
    },
    methods: {
    userInfo(name) {
      if (name === "personal") {
        this.people();
      } else {
        this.esc();
      }
    },
      esc:function () {//退出
      //跳转之前清除下缓存
      this.$cookies.remove("pcexam_id"); //用户id
      this.$cookies.remove("pcexam_username"); //用户名
      this.$cookies.remove("pcexam_name"); //用户名
      this.$cookies.remove("pcexam_phone"); //电话
      this.$cookies.remove("pcexam_position"); //职务
      this.$cookies.remove("pcexam_departmentId"); //部门id
      this.$router.push("/login");
      },
      people:function () {  //点击个人中心
        console.log("个人中心");
        this.$router.push({  //核心语句
          path:'/wholeCenter',   //跳转的路径
          query:{           //路由传参时push和query搭配使用 ，作用时传递参数
          }
        })
      },

    },

    mounted:function() {

      if(this.$cookies.get('pcexam_username')==undefined||this.$cookies.get('pcexam_username')=="undefined"||this.$cookies.get('pcexam_username')==""||this.$cookies.get('pcexam_username')==null||this.$cookies.get('pcexam_username')=='null'){
        this.$router.push('/login');
      }else{
        this.name=this.$cookies.get('pcexam_username');
      }
//      this.examName= this.$route.query.examname
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header{
    background: white;
    max-width:100%;
    height: 138px;
    background-image: url('../../assets/images/banner1.png');
    background-size: cover;
    z-index: 1;
    position: relative;
  }
  .header_zhong{
    /*width: 1366px;*/
    /*height: 138px;*/
    /*margin: 0 auto;*/
    /*!*background-image: url('../../assets/images/banner1.png');*!*/
    /*background-size: cover;*/
    width: 1082px;
    height: 138px;
    margin: 0 auto;
    position: relative;
  }
  .text{
    position: absolute;
    top: 41px;
    /*left: 49px;*/
  }
  .text img{
    width: 100%;
    height: 100%;
  }
  .name{
    position: absolute;
    bottom: 30px;
    right: 0;
  }
  .in{
    width: 707px;
    padding-top:70px;
    padding-left: 86px;
    margin:auto;
    color:rgba(51,51,51,1);
    font-size: 18px;
  }
  .in div:nth-of-type(2){
    /*margin-right: 20px;*/
    cursor: pointer;
  }
  .in div:nth-of-type(3){
    cursor: pointer;
  }

  .in div:nth-of-type(4){
    cursor: pointer;

  }
  .in div{
    display: inline-block;
    margin-left: 30px;
    line-height: 40px;
    text-align: center;
  }
  .peopleData>div:nth-of-type(4){
    border: none;
  }
  .peopleData>div>div:nth-of-type(1){
    font-size:36px;
    color:rgba(51,51,51,1);
  }
  .peopleData>div>div:nth-of-type(2),.peopleData>div>div:nth-of-type(3){
    font-size: 18px;
    color: #999999;
  }
  .crown img{
    width: 100%;
    height: 100%;
  }
</style>
